<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-calendar"></i> 货物
                </el-breadcrumb-item>
                <el-breadcrumb-item>添加货物类型</el-breadcrumb-item>
                <el-button type="primary" @click="onSubmit" style="float: right;">确认添加</el-button>
            </el-breadcrumb>
            
        </div>
        <div class="container clearfix">
                <div style="width: 49%;float: left;height: 400px;" >
                    <div class="form-box1">
                        <el-form ref="form" :model="form" label-width="80px" style="width: 80%;">
                            <el-form-item label="设备类型" style="margin-top: 15px;">
                                <el-select v-model="form.region" placeholder="请选择" style="width: 400px;">
                                    <el-option key="MOT202" label="MOT_U202" value="MOT202"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="货物名称">
                                <el-input v-model="form.name" style="width: 400px;"></el-input>
                            </el-form-item>
                            <el-form-item label="延迟开始">
                                <el-input-number v-model="form.time" controls-position="right" :min="0" :max="1275" :step="5" step-strictly style="width: 400px;"></el-input-number>
                                <div style="font-size: 5px;float: right;line-height: 3em;margin-top: 5px;">最小步长单位：5分钟<br>范围：1-1275分钟</div>
                            </el-form-item>
                            <el-form-item label="描述">
                                <el-input v-model="form.desc" style="width: 400px;"></el-input>
                            </el-form-item>
                            <el-form-item label="记录间隔">
                                <el-input-number v-model="form.gap" controls-position="right" :min="0" :max="1275" :step="5" step-strictly style="width: 400px;"></el-input-number>
                                <div style="font-size: 5px;float: right;line-height: 3em;margin-top: 5px;">最小步长单位：0.5分钟<br>范围：0.5-127.5分钟</div>
                            </el-form-item>
                        </el-form>
                    </div>
                    <br>
                    <div class="form-box1">
                        <el-form ref="form" :model="form" label-width="120px" style="width: 80%;">
                            <el-form-item label="理想温度范围" style="margin-top: 15px;">
                                <el-select v-model="form.value1" style="width: 80px;">
                                    <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                        >
                                    </el-option>
                                </el-select>
                                <el-input-number v-model="form.gap1" controls-position="right" :min="0" :max="127.5" :step="0.5" step-strictly placeholder="请选择"></el-input-number>
                                ——
                                <el-select v-model="form.value2" style="width: 80px;">
                                    <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                        >
                                    </el-option>
                                </el-select>
                                <el-input-number v-model="form.gap2" controls-position="right" :min="0" :max="127.5" :step="0.5" step-strictly></el-input-number>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
                <div style="width: 40%;float: right;height: 400px;" >
                    温度图表预留位置
                </div>
                <div>
                    <br>
                    <div class="form-box2">
                        <div>
                            <el-tag>报警设置-{{ alarm_1 }}</el-tag>
                            <el-switch
                                style="float: right;"
                                v-model="value_1"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                inactive-text='启用'>
                            </el-switch>
                        </div>
                        <br>
        
                        <div v-if="value_1 != false">
                            <p>报警类型 :</p>
                            <el-select v-model="o_value_one" placeholder="请选择">
                                <el-option
                                    v-for="item in tem_options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                            <!-- {{ o_value_one }} -->
                            <br>
                            <br>
                            <div v-if="o_value_one != '单温度范围-累计事件'">
                                <p>温度范围 :</p>
                                <el-select v-model="form.value1" style="width: 80px;">
                                    <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                        >
                                    </el-option>
                                </el-select>
                                <el-input type="text" name="" id="" v-model="temp_1" style="width: 300px;"></el-input>
                                <br>
                            </div>
                            <div v-else>
                                <p>温度范围 :</p>
                                 > &nbsp;<el-input type="text" name="" id="" style="width: 175px;"
                                 v-model="trf_1"></el-input>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                 < &nbsp;<el-input type="text" name="" id="" style="width: 175px;"
                                 v-model="trl_1"></el-input>
                                 <br>
                            </div>
                            <br>
                            <p>阈值 :</p>
                            <el-input type="text" name="" id="" style="width: 175px;" v-model="threshold_1"></el-input>  
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <el-select v-model="time_value_one" placeholder="请选择">
                                <el-option
                                    v-for="item in time_list"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>               
                        </div>
                        <div v-else>
                            <p style="color: red;">未开启报警设置</p>
                        </div>
        
                    </div>
        
                    <div class="form-box2">
                        <div>
                            <el-tag>报警设置-{{ alarm_2 }}</el-tag>
                            <el-switch
                                style="float: right;"
                                v-model="value_2"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                inactive-text='启用'>
                            </el-switch>
                        </div>
                        <br>
        
                        <div v-if="value_2 != false">
                            <p>报警类型 :</p>
                            <el-select v-model="o_value_two" placeholder="请选择">
                                <el-option
                                    v-for="item in tem_options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                            <br>
                            <br>
                            <div v-if="o_value_two != '单温度范围-累计事件'">
                                <p>温度范围 :</p>
                                <el-select v-model="form.value1" style="width: 80px;">
                                    <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                        >
                                    </el-option>
                                </el-select>
                                <el-input type="text" name="" id="" v-model="temp_2" style="width: 300px;"></el-input>
                                <br>
                            </div>
                            <div v-else>
                                <p>温度范围 :</p>
                                > &nbsp;<el-input type="text" name="" id="" style="width: 175px;"
                                v-model="trf_2"></el-input>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                < &nbsp;<el-input type="text" name="" id="" style="width: 175px;"
                                v-model="trl_2"></el-input>
                                <br>
                            </div>
                            <br>
                            <p>阈值 :</p>
                            <el-input type="text" name="" id="" style="width: 175px;"
                            v-model="threshold_2"></el-input> 
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  
                            <el-select v-model="time_value_two" placeholder="请选择">
                                <el-option
                                    v-for="item in time_list"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                        <div v-else>
                            <p style="color: red;">未开启报警设置</p>
                        </div>
                        
                    </div>
        
                    <div class="form-box2">
                        <div>
                            <el-tag>报警设置-{{ alarm_3 }}</el-tag>
                            <el-switch
                                style="float: right;"
                                v-model="value_3"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                inactive-text='启用'>
                            </el-switch>
                        </div>
                        <br>
        
                        <div v-if="value_3 != false">
                            <p>报警类型 :</p>
                            <el-select v-model="o_value_three" placeholder="请选择">
                                <el-option
                                    v-for="item in tem_options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                            <br>
                            <br>
                            <div v-if="o_value_three != '单温度范围-累计事件'">
                                <p>温度范围 :</p>
                                <el-select v-model="form.value1" style="width: 80px;">
                                    <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                        >
                                    </el-option>
                                </el-select>
                                <el-input type="text" name="" id="" v-model="temp_3" style="width: 300px;"></el-input>
                                <br>
                            </div>
                            <div v-else>
                                <p>温度范围 :</p>
                                > &nbsp;<el-input type="text" name="" id="" style="width: 175px;"
                                v-model="trf_3"></el-input>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                < &nbsp;<el-input type="text" name="" id="" style="width: 175px;"
                                v-model="trl_3"></el-input>
                                <br>
                            </div>
                            <br>
                            <p>阈值 :</p>
                            <el-input type="text" name="" id="" style="width: 175px;"
                            v-model="threshold_3"></el-input>  
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <el-select v-model="time_value_three" placeholder="请选择">
                                <el-option
                                    v-for="item in time_list"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select> 
                        </div>
                        <div v-else>
                            <p style="color: red;">未开启报警设置</p>
                        </div>
        
                    </div>
        
        
                    <br><br>
        
        
                    <div class="form-box2">
                        <div>
                            <el-tag>报警设置-{{ alarm_4 }}</el-tag>
                            <el-switch
                                style="float: right;"
                                v-model="value_4"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                inactive-text='启用'>
                            </el-switch>
                        </div>
                        <br>
                        <div v-if="value_4 != false">
                            <p>报警类型 :</p>
                            <el-select v-model="o_value_four" placeholder="请选择">
                                <el-option
                                    v-for="item in tem_options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                            <br>
                            <br>
                            <div v-if="o_value_four != '单温度范围-累计事件'">
                                <p>温度范围 :</p>
                                <el-select v-model="form.value1" style="width: 80px;">
                                    <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                        >
                                    </el-option>
                                </el-select>
                                <el-input type="text" name="" id="" v-model="temp_4" style="width: 300px;"></el-input>
                                <br>
                            </div>
                            <div v-else>
                                <p>温度范围 :</p>
                                > &nbsp;<el-input type="text" name="" id="" style="width: 175px;"
                                v-model="trf_4"></el-input>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                < &nbsp;<el-input type="text" name="" id="" style="width: 175px;"
                                v-model="trf_4"></el-input>
                                <br>
                            </div>
                            <br>
                            <p>阈值 :</p>
                            <el-input type="text" name="" id="" style="width: 175px;"
                            v-model="threshold_4"></el-input> 
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <el-select v-model="time_value_four" placeholder="请选择">
                                <el-option
                                    v-for="item in time_list"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>  
                        </div>
                        <div v-else>
                            <p style="color: red;">未开启报警设置</p>
                        </div>
        
                    </div>
        
                    <div class="form-box2">
                        <div>
                            <el-tag>报警设置-{{ alarm_5 }}</el-tag>
                            <el-switch
                                style="float: right;"
                                v-model="value_5"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                inactive-text='启用'>
                            </el-switch>
                        </div>
                        <br>
                        <div v-if="value_5 != false">
                            <p>报警类型 :</p>
                            <el-select v-model="o_value_five" placeholder="请选择">
                                <el-option
                                    v-for="item in tem_options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                            <br>
                            <br>
                            <div v-if="o_value_five != '单温度范围-累计事件'">
                                <p>温度范围 :</p>
                                <el-select v-model="form.value1" style="width: 80px;">
                                    <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                        >
                                    </el-option>
                                </el-select>
                                <el-input type="text" name="" id="" v-model="temp_5" style="width: 300px;"></el-input>
                                <br>
                            </div>
                            <div v-else>
                                <p>温度范围 :</p>
                                > &nbsp;<el-input type="text" name="" id="" style="width: 175px;"
                                v-model="trf_5"></el-input>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                < &nbsp;<el-input type="text" name="" id="" style="width: 175px;"
                                v-model="trl_5"></el-input>
                                <br>
                            </div>
                            <br>
                            <p>阈值 :</p>
                            <el-input type="text" name="" id="" style="width: 175px;"
                            v-model="threshold_5"></el-input> 
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
                            <el-select v-model="time_value_five" placeholder="请选择">
                                <el-option
                                    v-for="item in time_list"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select> 
                        </div>
                        <div v-else>
                            <p style="color: red;">未开启报警设置</p>
                        </div>
        
                    </div>
        
                    <div class="form-box2">
                        <div>
                            <el-tag>报警设置-{{ alarm_6 }}</el-tag>
                            <el-switch
                                style="float: right;"
                                v-model="value_6"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                inactive-text='启用'>
                            </el-switch>
                        </div>
                        <br>
                        <div v-if="value_6 != false">
                            <p>报警类型 :</p>
                            <el-select v-model="o_value_six" placeholder="请选择">
                                <el-option
                                    v-for="item in tem_options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                            <br>
                            <br>
                            <div v-if="o_value_six != '单温度范围-累计事件'">
                                <p>温度范围 :</p>
                                <el-select v-model="form.value1" style="width: 80px;">
                                    <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                        >
                                    </el-option>
                                </el-select>
                                <el-input type="text" name="" id="" v-model="temp_6" style="width: 300px;"></el-input>
                                <br>
                            </div>
                            <div v-else>
                                <p>温度范围 :</p>
                                > &nbsp;<el-input type="text" name="" id="" style="width: 175px;"
                                v-model="trf_6"></el-input>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                < &nbsp;<el-input type="text" name="" id="" style="width: 175px;"
                                v-model="trl_6"></el-input>
                                <br>
                            </div>
                            <br>
                            <p>阈值 :</p>
                            <el-input type="text" name="" id="" style="width: 175px;"
                            v-model="threshold_6"></el-input>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <el-select v-model="time_value_six" placeholder="请选择">
                                <el-option
                                    v-for="item in time_list"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>   
                        </div>
                        <div v-else>
                            <p style="color: red;">未开启报警设置</p>
                        </div>
                    </div>
                </div>
        </div>
    </div>
</template>

<script>
import { add_c_type } from '../../../api/api.js';

export default {
    name: 'addgoods',
    data() {
        return {
            tem_options: [{
                value: '单温上限-单个事件',
                label: '单温上限-单个事件'
            }, {
                value: '单温下限-单个事件',
                label: '单温下限-单个事件'
            }, {
                value: '单温度范围-累计事件',
                label: '单温度范围-累计事件'
            }],
            options: [
                {
                    value: '1',
                    label: '≤'
                    }, {
                    value: '2',
                    label: '＜'
                    }, {
                    value: '3',
                    label: '≥'
                    }, {
                    value: '4',
                    label: '＞'
                },
            ],
            form: {
                value1:'1',
                value2:'3',
                name: '',
                time:'',//延迟开始
                desc:'',//描述
                gap:'',//间隔
                gap1:'',//理想温度1
                gap2:'',//理想温度2
            },

            //定义报警设置警报参数(主警报1,主警报2等)
            alarm_1:'主警报1',
            alarm_2:'主警报2',
            alarm_3:'主警报3',
            alarm_4:'主警报4',
            alarm_5:'主警报5',
            alarm_6:'主警报6',
            
            //定义启用按钮参数
            value_1: false,
            value_2: false,
            value_3: false,
            value_4: false,
            value_5: false,
            value_6: false,

            //定义下拉框绑定value值参数
            o_value_one:'',
            o_value_two:'',
            o_value_three:'',
            o_value_four:'',
            o_value_five:'',
            o_value_six:'',

            //定义阈值下拉框列表
            time_list: [{
                value: '分钟',
                label: '分钟'
            }, {
                value: '小时',
                label: '小时'
            }, {
                value: '天',
                label: '天'
            }],

            //定义阈值下拉框绑定value值参数
            time_value_one:'',
            time_value_two:'',
            time_value_three:'',
            time_value_four:'',
            time_value_five:'',
            time_value_six:'',


            // //定义input框绑定的v-model数据(不包含报警设置)
            // type:'',            //设备类型
            // name:'',            //货物名称
            // y_time:'',          //延迟开始(延迟时间)
            // desc:'',            //描述信息
            // interval:'',        //记录间隔(间隔时间)
            // first_temp:'',      //理想温度范围(最低值)
            // last_temp:'',       //理想温度范围(最高值)

            //定义报警设置功能中的input框绑定的v-model数据
            temp_1:'',     //报警设置温度范围输入框数据(一)
            temp_2:'',     //报警设置温度范围输入框数据(二)
            temp_3:'',     //报警设置温度范围输入框数据(三)
            temp_4:'',     //报警设置温度范围输入框数据(四)
            temp_5:'',     //报警设置温度范围输入框数据(五)
            temp_6:'',     //报警设置温度范围输入框数据(六)
            
            threshold_1:'',//报警设置阈值信息输入框数据(一)
            threshold_2:'',//报警设置阈值信息输入框数据(二)
            threshold_3:'',//报警设置阈值信息输入框数据(三)
            threshold_4:'',//报警设置阈值信息输入框数据(四)
            threshold_5:'',//报警设置阈值信息输入框数据(五)
            threshold_6:'',//报警设置阈值信息输入框数据(六)

            //trf代表   temp_range_first  就是左侧的大于某某温度
            trf_1:'',      ////报警设置(单温度范围-累计事件)中大于某某温度的输入框数据(一)
            trf_2:'',      ////报警设置(单温度范围-累计事件)中大于某某温度的输入框数据(二)
            trf_3:'',      ////报警设置(单温度范围-累计事件)中大于某某温度的输入框数据(三)
            trf_4:'',      ////报警设置(单温度范围-累计事件)中大于某某温度的输入框数据(四)
            trf_5:'',      ////报警设置(单温度范围-累计事件)中大于某某温度的输入框数据(五)
            trf_6:'',      ////报警设置(单温度范围-累计事件)中大于某某温度的输入框数据(六)

            //trl代表   temp_range_last  就是右侧的小于某某温度
            trl_1:'',      ////报警设置(单温度范围-累计事件)中小于某某温度的输入框数据(一)
            trl_2:'',      ////报警设置(单温度范围-累计事件)中小于某某温度的输入框数据(二)
            trl_3:'',      ////报警设置(单温度范围-累计事件)中小于某某温度的输入框数据(三)
            trl_4:'',      ////报警设置(单温度范围-累计事件)中小于某某温度的输入框数据(四)
            trl_5:'',      ////报警设置(单温度范围-累计事件)中小于某某温度的输入框数据(五)
            trl_6:'',      ////报警设置(单温度范围-累计事件)中小于某某温度的输入框数据(六)

        };
    },
    methods: {
        onSubmit() {
            var params = {
                username:localStorage.getItem('ms_username'),
                //插入表单数据传递给后端
                name: this.form.name,
                time:this.form.time,
                desc:this.form.desc,
                gap:this.form.gap,
                gap1:this.form.gap1,
                gap2:this.form.gap2,

                //插入报警设置传递给后端
                alarm_1:{},
                alarm_2:{},
                alarm_3:{},
                alarm_4:{},
                alarm_5:{},
                alarm_6:{},

            }

            //警报1
            if(this.o_value_one != '单温度范围-累计事件'){
                params.alarm_1[this.alarm_1] = {'报警类型':this.o_value_one,'温度范围':this.temp_1,'阈值':this.threshold_1+this.time_value_one}
            }else{
                var temp_range_list1 = []
                temp_range_list1.push(this.trf_1)
                temp_range_list1.push(this.trl_1)
                params.alarm_1[this.alarm_1] = {'报警类型':this.o_value_one,'温度范围':JSON.stringify(temp_range_list1),'阈值':this.threshold_1+this.time_value_one}
            }
                
            //警报2
            if(this.o_value_two != '单温度范围-累计事件'){
                params.alarm_2[this.alarm_2] = {'报警类型':this.o_value_two,'温度范围':this.temp_2,'阈值':this.threshold_2+this.time_value_two}
            }else{
                var temp_range_list2 = []
                temp_range_list2.push(this.trf_2)
                temp_range_list2.push(this.trl_2)
                params.alarm_2[this.alarm_2] = {'报警类型':this.o_value_one,'温度范围':JSON.stringify(temp_range_list2),'阈值':this.threshold_2+this.time_value_two}
            }
            
            //警报3
            if(this.o_value_three != '单温度范围-累计事件'){
                params.alarm_3[this.alarm_3] = {'报警类型':this.o_value_three,'温度范围':this.temp_3,'阈值':this.threshold_3+this.time_value_three}
            }else{
                var temp_range_list3 = []
                temp_range_list3.push(this.trf_3)
                temp_range_list3.push(this.trl_3)
                params.alarm_3[this.alarm_3] = {'报警类型':this.o_value_one,'温度范围':JSON.stringify(temp_range_list3),'阈值':this.threshold_3+this.time_value_three}
            }
            
            //警报4
            if(this.o_value_four != '单温度范围-累计事件'){
                params.alarm_4[this.alarm_4] = {'报警类型':this.o_value_four,'温度范围':this.temp_4,'阈值':this.threshold_4+this.time_value_four}
            }else{
                var temp_range_list4 = []
                temp_range_list4.push(this.trf_4)
                temp_range_list4.push(this.trl_4)
                params.alarm_4[this.alarm_4] = {'报警类型':this.o_value_one,'温度范围':JSON.stringify(temp_range_list4),'阈值':this.threshold_4+this.time_value_four}
            }
            
            //警报5
            if(this.o_value_five != '单温度范围-累计事件'){
                params.alarm_5[this.alarm_5] = {'报警类型':this.o_value_five,'温度范围':this.temp_5,'阈值':this.threshold_5+this.time_value_five}
            }else{
                var temp_range_list5 = []
                temp_range_list5.push(this.trf_5)
                temp_range_list5.push(this.trl_5)
                params.alarm_5[this.alarm_5] = {'报警类型':this.o_value_one,'温度范围':JSON.stringify(temp_range_list5),'阈值':this.threshold_5+this.time_value_five}
            }
            

            //警报6
            if(this.o_value_six != '单温度范围-累计事件'){
                params.alarm_6[this.alarm_6] = {'报警类型':this.o_value_six,'温度范围':this.temp_6,'阈值':this.threshold_6+this.time_value_six}
            }else{
                var temp_range_list6 = []
                temp_range_list6.push(this.trf_6)
                temp_range_list6.push(this.trl_6)
                params.alarm_6[this.alarm_6] = {'报警类型':this.o_value_one,'温度范围':JSON.stringify(temp_range_list6),'阈值':this.threshold_6+this.time_value_six}
            }       

            console.log(params)

            add_c_type(params).then(res=>{
                this.$message.success(res.message);
            })
            
        }
    }
};
</script>

<style>
    .form-box1 {
        border: honeydew 1px solid;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
        
    }
    .form-box2 {
        border: honeydew 1px solid;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        float: left;
        width: 490px;
        height: 280px; 
        margin: 10px;
    }

    .clearfix {
        height: auto;
        *zoom: 1
    }
    .clearfix:before,.clearfix:after {
        content: " ";
        display: table
    }    
    .clearfix:after {
        clear: both
    }
</style>